<template>
  <div class="container">
    <div class="section">
      <h2 class="title">
        添加角色
      </h2>
      <ul class="info">

        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 角色名称
          </div>
          <div class="detail">
            <el-input v-model="role_name"
                      :disabled="status!==1"
                      placeholder="请输入内容" />
          </div>
        </li>

      </ul>
    </div>
    <div class="section">
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 角色权限
          </div>
          <div class="detail">
            点击勾选角色权限
          </div>
        </li>
        <li class="list-item limits">
          <el-checkbox-group v-model="limits"
                             @change="change_limits">
            <el-checkbox v-for="(item, index) in limits_list"
                         :key="index"
                         :label="item.name" />
          </el-checkbox-group>
        </li>
      </ul>
    </div>

    <div class="sub-btn">
      <el-button type="primary"
                 @click="save_project()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { addRole, getRoleInfo } from '../../../api/roleManage'
import { listAdminPermissions } from '../../../api/permissionsManage'
export default {
  data () {
    return {
      role_name: '',
      status: 3,
      role_list: [],
      role: '',
      role_id: '',
      user_name: '',
      user_email: '',
      user_tel: '',
      limits: [],
      limits_ids: [],
      limits_list: [],
      only_read: false
    }
  },
  created () {
    this.get_limits_list()
    if (this.$route.query.status) {
      this.status = this.$route.query.status
      if (this.status === 2 && this.$route.query.role_id) {
        //   编辑
        this.role_id = this.$route.query.role_id
        this.get_role_info()
      }
    }
  },
  methods: {
    //   修改权限
    change_limits (val) {
      const ids = []
      // 拿到对应的id
      val.forEach(item => {
        this.limits_list.map((val, index) => {
          if (item === val.name) {
            ids.push(val.id)
          }
        })
      })
      this.limits_ids = ids
    },
    // 获取角色信息
    get_role_info () {
      getRoleInfo( {
        id: this.role_id - 0
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.role_name = res.data.roleName
          //   获取选中项
          const str_arr = []
          // 拿到对应的id
          res.data.permissionIds.forEach(item => {
            this.limits_list.forEach((val, index) => {
              if (item.id === val.id) {
                str_arr.push(val.name)
              }
            })
          })
          this.limits = str_arr
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 获取权限列表
    get_limits_list () {
      listAdminPermissions( {
        'pageNum': 1,
        'pageSize': 1000
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          if (res.data.permissionResponseDTOS) {
            this.limits_list = res.data.permissionResponseDTOS
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 保存
    save_project () {
      this.change_limits(this.limits)
      if (this.role_name === '') {
        this.$message.error('请输入角色名称')
      } else if (this.limits_ids.length === 0) {
        this.$message.error('请勾选权限')
      } else {
        addRole( {
          'roleName': this.role_name,
          'permissionIds': this.limits_ids,
          'description': this.role_name,
          'deptId': 0
        }).then((result) => {
          const res = result.data
          if (res.code === 0) {
            this.$message({
              message: '角色保存成功',
              type: 'success'
            })
            this.$router.go(-1)
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error(err)
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 120px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 130px;
          text-align: right;
          .msk {
            font-size: 10px;
            color: #666;
            margin-right: 20px;
            margin-top: 10px;
          }
        }
        .detail {
          color: #666;
          min-width: 350px;
          font-size: 12px;
          display: inline-block;
          vertical-align: middle;
          .el-select {
            display: block !important;
          }
        }
        &.limits {
          margin-left: 100px;
        }
      }
    }
  }
  .sub-btn {
    .el-button {
      margin: 20px auto;
      display: block;
    }
  }
}
</style>

